<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="main"></div>

    <script type="text/babel">
      // 封装发送的请求函数
      async function ajax(url) {
        let result = await fetch(url)
          .then((resp) => {
            return resp.json();
          })
          .then((data) => {
            return data;
          });
        return result;
      }
      // 封装请求渲染函数
      async function loadDatas(page) {
        ajax(
          `https://www.lanqb.com/api/course/video/indexv3?type=${globalType}&level=${globalLevel}&page=${page}&limit=20`
        ).then(({ data }) => {
          globalDatas = data;
          console.log(data);
          renderDOM();
        });
      }

      // 发送请求，拿到首页数据
      let globalDatas = null;
      let globalType = 2; // 左侧 全部
      let globalLevel = ""; // 右侧 全部

      loadDatas(1);

      // 左右两侧按钮，绑定同一个点击事件
      function clickEvent(info) {
        // 通过参数对象des属性值，区分左右
        switch (info.des) {
          case "right":
            // 说明点击的是右侧的按钮
            globalLevel = info.val;
            break;
          case "left":
            // 说明点击的是左侧的按钮
            globalType = info.val;
            break;
          default:
            break;
        }
        loadDatas(1);
      }

      function renderDOM() {
        // 创建课程组件
        function Course(props) {
          let course = globalDatas[props.idx];
          return (
            <div className="course">
              <img src={"https://ss.lanqb.com/" + course.posters.web} alt="" />
              <p className="title">标题: {course.title}</p>
              <p className="count">{course.statistic.purchases} 人在学习</p>
              <p className="author">作者:{course.profile.nickname}</p>
            </div>
          );
        }
        // 创建根组件
        function Root() {
          return (
            <div id="root">
              <div className="nav">
                <div className="btns-left">
                  <button onClick={() => clickEvent({ des: "left", val: 2 })}>
                    全部
                  </button>
                  <button onClick={() => clickEvent({ des: "left", val: 1 })}>
                    最新
                  </button>
                  <button onClick={() => clickEvent({ des: "left", val: 3 })}>
                    最热
                  </button>
                </div>
                <div className="btns-right">
                  <button onClick={() => clickEvent({ des: "right", val: "" })}>
                    全部
                  </button>
                  <button
                    onClick={() => clickEvent({ des: "right", val: "1" })}
                  >
                    入门
                  </button>
                  <button
                    onClick={() => clickEvent({ des: "right", val: "2,3,4,5" })}
                  >
                    提升
                  </button>
                </div>
              </div>
              <hr />
              <div className="container">
                {globalDatas.map((obj, i) => {
                  return <Course idx={i} />;
                })}
              </div>
            </div>
          );
        }
        // console.log("开始渲染真实DOM");
        ReactDOM.render(<Root />, document.getElementById("main"));
        // console.log("真实DOM渲染结束");
      }
    </script>
  </body>
</html>
